<template>
  <div class="app-container" v-loading="companyLoading">
    <!-- 企业基本信息 -->
    <div class="company-header">
      <div class="company-info">
        <div class="company-logo">
          <div class="logo-placeholder">
            <i class="el-icon-office-building"></i>
          </div>
        </div>
        <div class="company-details">
          <h1 class="company-name">{{ companyInfo.companyName || '暂无' }}</h1>
        </div>
      </div>
    </div>

    <!-- 企业详细信息 -->
    <div class="company-details-section">
      <el-row :gutter="24" type="flex">
        <el-col :span="6">
          <div class="detail-item">
            <label>统一社会信用代码:</label>
            <span>{{ companyInfo.uniscid || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>联络人:</label>
            <span>{{ companyInfo.contact || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>联系电话:</label>
            <span>{{ companyInfo.contactPhone || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>联系地址:</label>
            <span>{{ companyInfo.address || '-' }}</span>
          </div>
        </el-col>

      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col :span="6">
          <div class="detail-item">
            <label>企业类型:</label>
            <span>{{ companyInfo.companyType || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>网址:</label>
            <span>{{ companyInfo.website || '-' }}</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>当前状态:</label> 
            <el-tag :style="{ color: companyInfo.status === 1 ? '#13ce66' : '#f56c6c' }" :type="companyInfo.status === 1 ? 'success' : 'danger'" size="small">{{ companyInfo.status === 1 ? '正常' : '禁用' || '-' }}</el-tag>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="detail-item">
            <label>更新时间:</label>
            <span>{{ companyInfo.updateTime || '-' }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="24" type="flex">
        <el-col :span="6">
          <div class="detail-item">
            <label>企业简介:</label>
            <span>{{ companyInfo.intro || '-' }}</span>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- Tab内容 -->
    <div class="tab-content">
      <el-tabs v-model="activeTab" @tab-click="handleTabClick">
        <el-tab-pane label="产品" name="product">
          <div class="empty-placeholder">
            <i class="el-icon-box"></i>
            <p>暂无产品数据</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="标签" name="tag">
          <el-table 
            v-loading="tagLoading" 
            :data="tagList" 
            empty-text="暂无数据"
            style="width: 100%"
          >
            <el-table-column prop="tagName" label="标签" align="center" />
            <el-table-column prop="auditStatus" label="审核状态" align="center">
              <template slot-scope="scope">
                <el-tag 
                  :type="getAuditStatusType(scope.row.auditStatus)" 
                  size="small"
                >
                  {{ getAuditStatusText(scope.row.auditStatus) }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="remarks" label="审核备注" align="center">
              <template slot-scope="scope">
                {{ scope.row.remarks || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="publicStatus" label="公开状态" align="center">
              <template slot-scope="scope">
                <el-tag 
                  :type="scope.row.publicStatus ? 'success' : 'info'" 
                  size="small"
                >
                  {{ scope.row.publicStatus ? '公开' : '不公开' }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 返回按钮 -->
    <div class="back-button">
      <el-button @click="goBack">
        <i class="el-icon-arrow-left"></i> 返回
      </el-button>
    </div>
  </div>
</template>

<script>
import { companyTagList, getCompanyDetail } from "@/api/biz/api";

export default {
  name: "CompanyDetail",
  props: {
    companyId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      activeTab: 'product',
      companyInfo: {},
      tagList: [],
      tagLoading: false,
      companyLoading: false
    };
  },
  created() {
    this.loadCompanyDetail(this.companyId);
  },
  watch: {
    companyId(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.tagList = [];
        this.loadCompanyDetail(newVal);
      }
    }
  },
  methods: {
    // 加载企业详情信息
    loadCompanyDetail(id) {
      const cid = id || this.companyId;
      if (!cid) {
        this.$modal.msgError('缺少企业ID参数');
        this.goBack();
        return;
      }
      
      this.companyLoading = true;
      // 调用获取企业详情的API
      getCompanyDetail(cid)
        .then(({ data }) => {
          this.companyInfo = data || {};
          this.companyLoading = false;
        })
        .catch(() => {
          this.companyLoading = false;
          this.$modal.msgError('获取企业详情失败');
          this.goBack();
        });
    },
    // Tab切换处理
    handleTabClick(tab) {
      if (tab.name === 'tag' && this.tagList.length === 0) {
        this.loadCompanyTags();
      }
    },
    // 加载企业标签列表
    loadCompanyTags() {
      const companyId = this.companyId || this.companyInfo.id;
      if (!companyId) {
        this.$modal.msgError('缺少企业ID参数');
        return;
      }
      
      this.tagLoading = true;
      companyTagList(companyId)
        .then(({ data }) => {
          this.tagList = data || [];
          this.tagLoading = false;
        })
        .catch(() => {
          this.tagLoading = false;
          this.$modal.msgError('获取企业标签失败');
        });
    },
    // 获取审核状态类型
    getAuditStatusType(status) {
      switch(status) {
        case 1: return 'success'; // 审核通过
        case 2: return 'warning'; // 审核不通过
        case 3: return 'info';    // 待审核
        default: return 'info';   // 无状态
      }
    },
    // 获取审核状态文本
    getAuditStatusText(status) {
      switch(status) {
        case 1: return '通过';
        case 2: return '不通过';
        case 3: return '待审核';
        default: return '无';
      }
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 84px);
}

.company-header {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-info {
  display: flex;
  align-items: center;
}

.company-logo {
  margin-right: 20px;
}

.logo-placeholder {
  width: 80px;
  height: 80px;
  background: #409EFF;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 32px;
}

.company-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
}

.company-details-section {
  background: white;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.detail-item {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.detail-item label {
  font-weight: 500;
  color: #606266;
  margin-right: 1rem;
  /* min-width: 120px; */
}

.detail-item span {
  color: #303133;
  display: inline-block;
}

.tab-content {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-placeholder {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.empty-placeholder i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.back-button {
  margin-top: 16px;
  text-align: center;
}

/* Tab样式调整 */
.el-tabs__header {
  margin-bottom: 20px;
}

.el-tabs__item {
  font-size: 16px;
  font-weight: 500;
}
</style>
